<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
  <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>
  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
  <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/>
  <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
  <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>

  <script type="application/javascript;version=1.8"
          src="chrome://devtools/content/shared/theme-switching.js"></script>
  <script type="application/javascript;version=1.8" src="inspector.js" defer="true"></script>
</head>
<body class="theme-body" role="application">
  <div class="inspector-responsive-container theme-body inspector">

    <!-- Main Panel Content -->
    <div id="inspector-main-content" class="devtools-main-content">
      <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
                data-localization-bundle="devtools/client/locales/inspector.properties">
        <button id="inspector-element-add-button" class="devtools-button"
                     data-localization="title=inspectorAddNode.label"></button>
        <div class="devtools-toolbar-spacer"></div>
        <span id="inspector-searchlabel"></span>
        <div id="inspector-search" class="devtools-searchbox has-clear-btn">
          <input id="inspector-searchbox" class="devtools-searchinput"
                      type="search"
                      data-localization="placeholder=inspectorSearchHTML.label3"/>
          <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
        </div>
        <button id="inspector-eyedropper-toggle"
                     class="devtools-button command-button-invertable"></button>
        <div id="inspector-sidebar-toggle-box"></div>
      </div>
      <div id="markup-box"></div>
      <div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
        <div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
                  role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
      </div>
    </div>

    <!-- Splitter -->
    <div
      xmlns="http://www.w3.org/1999/xhtml"
      id="inspector-splitter-box">
    </div>

    <!-- Sidebar Container -->
    <div id="inspector-sidebar-container">
      <div
        xmlns="http://www.w3.org/1999/xhtml"
        id="inspector-sidebar"
        hidden="true"></div>
    </div>

    <!-- Sidebar panel definitions -->
    <div id="tabpanels" style="visibility:collapse">
      <div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel"
                data-localization-bundle="devtools/client/locales/inspector.properties">
        <div id="ruleview-toolbar-container" class="devtools-toolbar">
          <div id="ruleview-toolbar">
            <div class="devtools-searchbox has-clear-btn">
              <input id="ruleview-searchbox"
                          class="devtools-filterinput devtools-rule-searchbox"
                          type="search"
                          data-localization="placeholder=inspector.filterStyles.placeholder"/>
              <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
            </div>
            <div id="ruleview-command-toolbar">
              <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
              <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
            </div>
          </div>
          <div id="pseudo-class-panel" hidden="true">
            <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
            <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
            <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
        </div>
        </div>

        <div id="ruleview-container" class="ruleview">
          <div id="ruleview-container-focusable" tabindex="-1">
          </div>
        </div>
      </div>

      <div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel"
                data-localization-bundle="devtools/client/locales/inspector.properties">
        <div id="computedview-toolbar" class="devtools-toolbar">
          <div class="devtools-searchbox has-clear-btn">
            <input id="computedview-searchbox"
                        class="devtools-filterinput devtools-rule-searchbox"
                        type="search"
                        data-localization="placeholder=inspector.filterStyles.placeholder"/>
            <button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
          </div>
          <input id="browser-style-checkbox"
                      type="checkbox"
                      class="includebrowserstyles"/>
          <label id="browser-style-checkbox-label" for="browser-style-checkbox"
                        data-localization="content=inspector.browserStyles.label"></label>
        </div>

        <div id="computedview-container">
          <div id="computedview-container-focusable" tabindex="-1">
            <div id="boxmodel-wrapper" tabindex="0"
              data-localization-bundle="devtools/client/locales/boxmodel.properties">
              <div id="boxmodel-header">
                <div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></div>
                <span data-localization="content=boxmodel.title"></span>
              </div>

              <div id="boxmodel-container">
                <div id="boxmodel-main">
                  <span class="boxmodel-legend" data-box="margin" data-localization="content=boxmodel.margin;title=boxmodel.margin"></span>
                  <div id="boxmodel-margins" data-box="margin" data-localization="title=boxmodel.margin">
                    <span class="boxmodel-legend" data-box="border" data-localization="content=boxmodel.border;title=boxmodel.border"></span>
                    <div id="boxmodel-borders" data-box="border" data-localization="title=boxmodel.border">
                      <span class="boxmodel-legend" data-box="padding" data-localization="content=boxmodel.padding;title=boxmodel.padding"></span>
                      <div id="boxmodel-padding" data-box="padding" data-localization="title=boxmodel.padding">
                        <div id="boxmodel-content" data-box="content" data-localization="title=boxmodel.content">
                        </div>
                      </div>
                    </div>
                  </div>

                  <p class="boxmodel-margin boxmodel-top"><span data-box="margin" class="boxmodel-editable" title="margin-top"></span></p>
                  <p class="boxmodel-margin boxmodel-right"><span data-box="margin" class="boxmodel-editable" title="margin-right"></span></p>
                  <p class="boxmodel-margin boxmodel-bottom"><span data-box="margin" class="boxmodel-editable" title="margin-bottom"></span></p>
                  <p class="boxmodel-margin boxmodel-left"><span data-box="margin" class="boxmodel-editable" title="margin-left"></span></p>

                  <p class="boxmodel-border boxmodel-top"><span data-box="border" class="boxmodel-editable" title="border-top"></span></p>
                  <p class="boxmodel-border boxmodel-right"><span data-box="border" class="boxmodel-editable" title="border-right"></span></p>
                  <p class="boxmodel-border boxmodel-bottom"><span data-box="border" class="boxmodel-editable" title="border-bottom"></span></p>
                  <p class="boxmodel-border boxmodel-left"><span data-box="border" class="boxmodel-editable" title="border-left"></span></p>

                  <p class="boxmodel-padding boxmodel-top"><span data-box="padding" class="boxmodel-editable" title="padding-top"></span></p>
                  <p class="boxmodel-padding boxmodel-right"><span data-box="padding" class="boxmodel-editable" title="padding-right"></span></p>
                  <p class="boxmodel-padding boxmodel-bottom"><span data-box="padding" class="boxmodel-editable" title="padding-bottom"></span></p>
                  <p class="boxmodel-padding boxmodel-left"><span data-box="padding" class="boxmodel-editable" title="padding-left"></span></p>

                  <p class="boxmodel-size">
                    <span data-box="content" data-localization="title=boxmodel.content"></span>
                  </p>
                </div>

                <div id="boxmodel-info">
                  <span id="boxmodel-element-size"></span>
                  <section id="boxmodel-position-group">
                    <button class="devtools-button" id="layout-geometry-editor"
                                 data-localization="title=boxmodel.geometryButton.tooltip"></button>
                    <span id="boxmodel-element-position"></span>
                  </section>
                </div>

                <div style="display: none">
                  <p id="boxmodel-dummy"></p>
                </div>
              </div>
            </div>

            <div id="propertyContainer" class="theme-separator" tabindex="0">
            </div>

            <div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
          </div>
        </div>
      </div>

      <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
                data-localization-bundle="devtools/client/locales/font-inspector.properties">
        <div class="devtools-toolbar">
          <div class="devtools-searchbox">
            <input id="font-preview-text-input" class="devtools-textinput" type="search"
                        data-localization="placeholder=fontinspector.previewText"/>
          </div>
          <label id="font-showall" class="theme-link"
                      data-localization="content=fontinspector.seeAll;
                                         title=fontinspector.seeAll.tooltip"></label>
        </div>

        <div id="font-container">
          <ul id="all-fonts"></ul>
        </div>

        <div id="font-template">
          <section class="font">
            <div class="font-preview-container">
              <img class="font-preview"></img>
            </div>
            <div class="font-info">
              <h1 class="font-name"></h1>
              <span class="font-is-local" data-localization="content=fontinspector.system"></span>
              <span class="font-is-remote" data-localization="content=fontinspector.remote"></span>
              <p class="font-format-url">
                <input readonly="readonly" class="font-url"></input>
                <span class="font-format"></span>
              </p>
              <p class="font-css">
                <span data-localization="content=fontinspector.usedAs"></span> "<span class="font-css-name"></span>"
              </p>
              <pre class="font-css-code"></pre>
            </div>
          </section>
        </div>
      </div>

      <div id="sidebar-panel-animationinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
        <iframe class="devtools-inspector-tab-frame"></iframe>
      </div>
    </div>

  </div>
</body>
</html>
